import { useState, useEffect, useCallback } from "react";
import { RightOutlined } from "@ant-design/icons";
import UserCard from "../../../../components/UserCard";
import UserMark from "../../../../components/UserMark";
import SelectGroup from "../../../../components/SelectGroup";
import { request } from "../../../../common/request";
import { urls } from "../../../../common/urls";
import { useNavigate } from "react-router-dom";
import { sendMessage } from '../../../../util/message';
import { getMid } from '../../../../util/index';
import "./index.less";

function UserItem(props: any) {
  const { id } = props;
  const [info, setInfo]: any = useState({});
  const navigate = useNavigate();

  const getUserInfo = (id: string) => {
    request({
      method: "post",
      data: {
        method: urls.userDetail,
        f_uid: id,
      },
    }).then((res: any) => {
      const info = {
        ...res.data,
        name: res.data.username,
        oid: res.data.users_id,
        id
      };
      setInfo(info);
    });
  };

  const handleSend = useCallback(
    () => {
      console.log(info);
      sendMessage('', getMid(info.id.toString())).then((res => {
        if(res.id) {
          navigate('/chat');
        }
      }))
    },
    [info],
  )
  

  const handleDel = useCallback(
    () => {
      request({
        method: "post",
        data: {
          method: urls.delUser,
          f_uid: id,
        },
      }).then((res: any) => {

      });
    },
    [id],
  )
  

  useEffect(() => {
    getUserInfo(id);
  }, [id]);

  return (
    <>
      <div className="user-content">
        <UserCard info={info} />
        <div className="user-link-group">
          <UserMark info={info} />
          <SelectGroup info={info}/>
        </div>
        <div className="user-btn-group">
          <div className="btn-default" onClick={handleDel}>删除好友</div>
          <div className="btn-default active-btn" onClick={handleSend}>发消息</div>
        </div>
      </div>
    </>
  );
}
export default UserItem;
